import {Form, Row, Col, Input, Select} from 'antd'
import React, {useEffect, memo, useImperativeHandle} from 'react'
import {connect} from 'umi'

import styles from './index.less'
import {SendTimeOptions, isRecover} from '../constant'

const view = memo((props: {routerQuery: any; detail: any; cRef: any}) => {
	const {routerQuery, detail, cRef} = props
	const [form] = Form.useForm()
	useEffect(() => {
		form.setFieldsValue({releaseTime: 4})
	}, [routerQuery])

	// 初始化表单数据
	useEffect(() => {
		if (
			routerQuery.pageType === 'edit' ||
			routerQuery.pageType === 'detail' ||
			routerQuery.pageType === 'process'
		) {
			const obj = detail?.filter(
				(item: any) => item.activitiesType === 4,
			)[0]
			form.setFieldsValue({
				...obj,
				examinationInterval:
					obj?.detailsDTOList[0]?.examinationInterval,
				amount: obj?.detailsDTOList[0]?.amount,
				releaseTime: 4,
				extendedRentalDays: obj?.detailsDTOList[0]?.extendedRentalDays,
			})
		}
	}, [detail])

	useImperativeHandle(cRef, () => ({
		// changeVal 就是暴露给父组件的方法
		getFormData: async () => {
			const value = await form.validateFields()
			return value
		},
	}))
	return (
		<div className={styles.admittanceAdd}>
			<div className={`${styles.content} ${styles.formDetils}`}>
				<Form
					form={form}
					name="basic"
					layout="horizontal"
					labelCol={{flex: '150px'}}
					labelAlign="right"
					labelWrap
					initialValues={{remember: true}}
					autoComplete="off"
					disabled={
						routerQuery.pageType === 'detail' ||
						routerQuery.pageType === 'process'
					}>
					<Row gutter={12}>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="发放时间"
								name="releaseTime"
								rules={[{required: true, message: '请选择'}]}>
								<Select
									placeholder="请选择"
									disabled
									allowClear
									options={[...SendTimeOptions]}
								/>
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="延期天数"
								name="extendedRentalDays"
								rules={[{required: true, message: '请输入'}]}>
								<Input
									placeholder="请输入延期天数"
									maxLength={10}
								/>
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="违反规定是否追回"
								name="isRecover"
								rules={[{required: true, message: '请选择'}]}>
								<Select
									placeholder="请选择"
									allowClear
									options={[...isRecover]}
								/>
							</Form.Item>
						</Col>
					</Row>
				</Form>
			</div>
		</div>
	)
})
export default connect(({user}: any) => ({user}))(view)
